```svelte
<script lang="ts">
  import * as pagination from "@zag-js/pagination"
  import { useMachine, normalizeProps } from "@zag-js/svelte"
  import { data } from "./data"

  const id = $props.id()
  const service = useMachine(pagination.machine, {
    id,
    count: data.length,
  })
  const api = $derived(pagination.connect(service, normalizeProps))
</script>

<div>
  {#if api.totalPages > 1}
    <nav {...api.getRootProps()}>
      <ul>
        <li>
          <a href="#previous" {...api.getPrevTriggerProps()}>
            Previous <span class="visually-hidden">Page</span>
          </a>
        </li>
        {#each api.pages as page, i}
          {#if page.type === "page"}
            <li>
              <a href={`#${page.value}`} {...api.getItemProps(page)}>
                {page.value}
              </a>
            </li>
          {:else}
            <li>
              <span {...api.getEllipsisProps({ index: i })}>&#8230;</span>
            </li>
          {/if}
        {/each}
        <li>
          <a href="#next" {...api.getNextTriggerProps()}>
            Next <span class="visually-hidden">Page</span>
          </a>
        </li>
      </ul>
    </nav>
  {/if}
</div>
```
